<template>
  <div id="barCharts"></div>
</template>

<script>
import * as echarts from 'echarts';
import getTheme from '@/utils/getTheme';

export default {
  name: 'Charts',
  mixins: [ getTheme ],
  data() {
    return {
      chart: '',
    };
  },
  mounted() {
    this.init();
  },
  methods: {
    init() {
      let dom = document.getElementById('barCharts');
      echarts.dispose(dom);
      this.chart = echarts.init(dom, this.theme);
      let option = {
        tooltip: {
          trigger: 'axis',
          axisPointer: {
            type: 'cross',

          },
        },
        grid: {
          //调整图表位置
          show: false, //是否显示直角坐标系网格
          top: '15%', // 一下数值可为百分比也可为具体像素值
          right: '8%',
          bottom: '10%',
          left: '8%',
        },
        xAxis: [
          {
            type: 'category',
            data: [ 'a', 'b', 'c', 'd', 'e', 'f' ],
            axisPointer: {
              type: 'shadow',
            },
            axisLine: {
              //横轴样式

            },
            axisLabel: {
              show: true,

            },
            axisTick: {
              show: false, //隐藏刻度线
            },
          },
        ],
        yAxis: [
          {
            type: 'value',
            // min: 0, 最小值
            // interval: 20, 两根横轴之间的差值，不太建议手动设置
            splitLine: {
              show: true,
              lineStyle: {
                // color: ["#08426D"],
                width: 1,
                type: 'solid',
              },

            },
            axisLabel: {
              show: true,
              formatter: '{value}',
            },
          },
        ],
        legend: {
          top: '5%', // 控制 板块控制器的位置
          right: 'center',
          // icon: 'rect',//形状  类型包括 circle，rect,line，roundRect，triangle，diamond，pin，arrow，none
          // itemWidth: 10,  // 设置宽度
          // itemHeight: 4, // 设置高度
          itemGap: 40, // 设置间距
          data: [
            {
              name: 'A柱子',
              textStyle: {
                // color: "#fff", // 单独设置某一个图列的颜色
              },
            },
            {
              name: 'B柱子',
              textStyle: {
                // color: "#fff", // 单独设置某一个图列的颜色
              },
            },
          ],
        },
        series: [
          {
            name: 'A柱子',
            type: 'bar',
            barWidth: '15%', // 柱的宽度
            data: [ 50, 60, 80, 45, 65, 25 ],
            // itemStyle: {
            //   color: {
            //     type: "linear",
            //     x: 0, // 右
            //     y: 1, // 下
            //     x2: 0, // 左
            //     y2: 0, // 上
            //     colorStops: [
            //       {
            //         offset: 0,
            //         color: "#192060", // 0% 处的颜色
            //       },
            //       {
            //         offset: 0.9,
            //         color: "#00C0FF", // 90% 处的颜色
            //       },
            //     ],
            //   },
            // },
            label: {
              show: true, // 开启显示
              position: 'top', // 在上方显示
              distance: 10, // 距离图形元素的距离。当 position 为字符描述值（如 'top'、'insideRight'）时候有效。
              verticalAlign: 'middle',
              textStyle: {
                // 数值样式
                // color: "#D2CC13",
                fontSize: 12,
              },
            },
          },
          {
            name: 'B柱子',
            type: 'bar',
            barWidth: '15%', // 柱的宽度
            data: [ 30, 26, 89, 12, 63, 45 ],
            // itemStyle: {
            //   color: {
            //     type: "linear",
            //     x: 0, // 右
            //     y: 1, // 下
            //     x2: 0, // 左
            //     y2: 0, // 上
            //     colorStops: [
            //       {
            //         offset: 0,
            //         color: "#322E28", // 0% 处的颜色
            //       },
            //       {
            //         offset: 0.9,
            //         color: "#FFD600", // 90% 处的颜色
            //       },
            //     ],
            //   },
            // },
            label: {
              show: true, // 开启显示
              position: 'top', // 在上方显示
              distance: 10, // 距离图形元素的距离。当 position 为字符描述值（如 'top'、'insideRight'）时候有效。
              verticalAlign: 'middle',
              textStyle: {
                // 数值样式
                // color: "#D2CC13",
                fontSize: 12,
              },
            },
          },
        ],
      };
      this.chart.setOption(option);
    },
  },
};
</script>

<style scoped>
#barCharts {
  width: 600px;
  height: 400px;
}
</style>